<template>
  <div>
    首页
    <!-- number 类型 -->
    <p @click="addCount">count:{{ count }}</p>
    <hr />
    <!-- 字符串类型 -->
    <p>
      <input type="text" v-model="username">
    </p>
    <hr />
    <!-- 数组类型 -->
    <ul>
      <li v-for="item in userArr" :key="item.id">{{ item.name }}</li>
    </ul>
    <p><button @click="addHero">添加奥特曼</button></p>
    <!-- 对象类型 -->
    <p @click="addAge(10)">{{ userobj.name }}--{{ userobj.age }}</p>
  </div>
</template>

<script>
// setup 直接在 script 标签上设置setup 属性,该种语法数据vue3组合式语法中的语法糖写法
// vue2=> 过渡语法  =>vue3语法糖写法 

// 01: 借助2个钩子函数实现定义响应式的数据
// ref(初始值) 返回的结果是一个ref 引用对象value属性就是其值
// ref 实现数据响应式的原理其实就是 Object.defineProperty() 实现对ref 中定义的数据的设置get 和 set 
// 实现了数据的监听. 

// reactive()  
import { ref } from 'vue';
export default {
  setup() {
    //  该区域中语法 
    // 01: 使用ref 定义一个number 数据
    const count = ref(100);
    // console.log('count', count.value); // 100
    const addCount = () => {
      count.value++
    };

    // 02:  定义str 类名
    const username = ref('')


    // 03: 定义数组
    const userArr = ref([
      {
        id: 1,
        name: '迪迦奥特曼'
      },
      {
        id: 2,
        name: '泰罗奥特曼'
      },
      {
        id: 3,
        name: '赛文奥特曼'
      },
    ])

    // console.log('userArr', userArr);
    const addHero = () => {
      userArr.value.push({
        id: userArr.value[userArr.value.length - 1].id + 1,
        name: '盖亚奥特曼'
      })
      // console.log('userArr', userArr);
    }

    // 04: 操作对象
    const userobj = ref({
      name: '奥特曼之父',
      age: 10
    })

    function addAge(n) {
      userobj.value.age += n
    }
    console.log('userobj', userobj);
    return {
      count,
      addCount,
      username,
      userArr,
      addHero,
      userobj,
      addAge

    }
  }
}


</script>
